     
EmaMobile.views.ViewPort = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    listeners:{
    afterrender:function(c){
                    c.el.on('taphold',function(event){
                        Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'show-menu',                                       
                });
                        
                            });
                    }
                },
    initComponent: function () {

        Ext.apply(EmaMobile.views, {
            
            authentificationView: new EmaMobile.views.AuthentificationView(),
            listeCampagnesView: new EmaMobile.views.ListeCampagnesView(),
            listeTodoView: new EmaMobile.views.ListeTodoView(),
            firstPageView: new EmaMobile.views.FirstPageView(),
            resultatView: new EmaMobile.views.ResultatView(),
            menu: new EmaMobile.views.Menu()

        });
        
        this.topToolbar = new Ext.Toolbar({
            ui : 'main-title',
            html : '<div class="auth-div" id="logo"><img name="EMaEval" src="/img/EMaEval-icon-paraguas.png" class="auth-img-paraguas"><span class="auth-emamobile">EmaMobile</span><img name="EMaEval" src="img/EMaEval-icon-mundo.png" class="auth-img-mundo"></div>',
        });
        this.dockedItems = [ this.topToolbar ];
        
        this.items = [
            EmaMobile.views.authentificationView,
            EmaMobile.views.listeCampagnesView, 
            EmaMobile.views.listeTodoView,
            EmaMobile.views.firstPageView,
            EmaMobile.views.resultatView,
           /* EmaMobile.views.evaluerView, */
            EmaMobile.views.menu
        ];

        document.addEventListener('menubutton', function() {
            
            if (EmaMobile.views.menu.hidden){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'show-menu',                                       
                });
            }
            else {
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'hide-menu',                                       
                });
            }
            
            }, false);

        document.addEventListener('backbutton', function() {
            
            if (EmaMobile.views.viewPort.getActiveItem() == EmaMobile.views.authentificationView){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'exit'
                });
                }
            else if (EmaMobile.views.viewPort.getActiveItem() == EmaMobile.views.listeCampagnesView){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'first-page',
                    parametrer : true,
                    direction: 'right'
                });
                
            }
            else if (EmaMobile.views.viewPort.getActiveItem() == EmaMobile.views.firstPageView){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'authentification',
                    parametrer : true,
                    direction: 'right'
                });
                
            }
            else if (EmaMobile.views.viewPort.getActiveItem() == EmaMobile.views.listeTodoView){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'list-campagnes',
                    parametrer : true,
                    direction: 'right'
                });
                
            }
            else if (EmaMobile.views.viewPort.getActiveItem() == EmaMobile.views.resultatView){
                Ext.dispatch({
                    controller: EmaMobile.controllers.controller,
                    action: 'first-page',
                    direction: 'right'
                });
                
            }
            /*
            else {
                EmaMobile.views.viewPort.setActiveItem(
                        EmaMobile.views.listeCampagnesView, {
                            type : 'slide',
                            direction : 'right'
                        });
            }*/
        }, false);
        
        EmaMobile.views.ViewPort.superclass.initComponent.call(this);
    }
});

